{% extends "base.html" %}

{% block content %}


<div id="sol-cont">
<div id="left-ss" class="box_bg"><img src="/assets/images/solar_system.png" /></div>
<div id="right-ss">
<div class="box_bg boxes">
<p align="center">CURRENT PLANET: <br />{{current_planet.name}}</p>
<table>
<tr><td style="text-align:left;" width="160px">Colony Ship</td><td style="text-align:right;" width="26px">x {{colony_cnt}}</td></tr>
<tr><td style="text-align:left;" width="160px">Recycler</td><td style="text-align:right;" width="26px">x {{recycler_cnt}}</td></tr>
<tr><td style="text-align:left;" width="160px">Freighter</td><td style="text-align:right;" width="26px">x {{freighter_cnt}}</td></tr>
</table>
<br />
<input type="button" style="display:block; text-align: center;" class="green-button" onClick="location.href='/planet/view/'" value='ZOOM IN'>
</div>

<div class="box_bg boxes">
<form action="/calculate/move/" method="post">

<div class="ship_type_radio">
    <p>Choose a ship type:<p>
    <input type="radio" name="ship_type" value="colony" checked="checked" onclick="ColonyShipSelection();">Colony<br />
    <input type="radio" name="ship_type" value="recycling" onclick="RecycleShipSelection();">Recycling<br />
    <input type="radio" name="ship_type" value="freighter" onclick="FreighterShipSelection();">Freighter<br />
</div>
    
<div id="colony_selector" name="ship_selectors" style="display:block;z-index:999;">
    <p align="center">Select the colony ship you want to pilot:</p>
        <select  style="width: 100%;" name="ship_id1">
            {% for colony_ship in colony_ships  %}
            <option value="{{colony_ship.key}}">{{colony_ship.name}}</option>
            {% endfor %}
        </select>
    <br />
</div>
<div id="recycle_selector" name="ship_selectors" style="display:none;z-index:998;">
<p align="center">Select the recycler ship you want to pilot:</p>
        <select  style="width: 100%;" name="ship_id2">
            {% for recycler_ship in recycler_ships  %}
            <option value="{{recycler_ship.key}}">{{recycler_ship.name}}</option>
            {% endfor %}
        </select>
        <br />
</div>

<div id="freighter_selector" name="ship_selectors" style="display:none;z-index:997;">
<p align="center">Select the freighter ship you want to pilot:</p>
        <select  style="width: 100%;" name="ship_id3">
            {% for freighter_ship in freighter_ships  %}
            <option value="{{freighter_ship.key}}">{{freighter_ship.name}}</option>
            {% endfor %}
        </select>
        <br />
</div>
<hr />

<p align="center">Select the planet you wish to navigate to:</p>
<select  style="width: 100%;" name="destination">
{% for planet in solar_system %}
<option value="{{planet.key}}">{{planet.name}}</option>
{% endfor %}
</select><br />
<input type="submit"  style="display:block; text-align: center;" class="green-button" value="CALCULATE MOVE">

</form><br />
{% if dest_rec %}
<p align="center">COST to reach {{destination.name}}: {{cost}}</p><br />
<button  style="display:block; text-align: center;" class="green-button" onclick="window.location='/solar_system/move/?dest_rec_id={{dest_rec.key}}'">CONFIRM MOVE</button>
{% endif %}


</div>
</div>
</div>

</div>
{% endblock content %}